<template>
	<el-drawer v-model="visible" title="编辑" :size="1200" :with-header="false">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="属性设置" name="field">
				<vxe-table
					ref="fieldTable"
					border
					size="mini" 
					row-key
					class="sortable-row-gen"
					:data="fieldList"
					:checkbox-config="{ checkStrictly: true }"
					:edit-config="{ trigger: 'click', mode: 'cell' }"
				>
					<vxe-column type="seq" width="60"></vxe-column>
					<vxe-column width="60" title="拖动" >
						<template #default>
							<span class="drag-btn">
								<i class="vxe-icon-sort"></i>
							</span>
						</template>
						<template #header>
							<el-tooltip class="item" effect="dark" content="按住后可以上下拖动排序" placement="top-start">
								<i class="vxe-icon-question-circle-fill"></i>
							</el-tooltip>
						</template>
					</vxe-column>
					<vxe-column field="fieldName" title="字段名" drag-sort></vxe-column>
					<vxe-column field="fieldComment" title="说明" :edit-render="{ name: 'input' }"></vxe-column>
					<vxe-column field="fieldType" title="字段类型"></vxe-column>
					<vxe-column field="attrName" title="属性名" :edit-render="{ name: 'input' }"></vxe-column>
					<vxe-column field="attrType" title="属性类型">
						<template #default="{ row }">
							<vxe-select v-model="row.attrType">
								<vxe-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
							</vxe-select>
						</template>
					</vxe-column>
					<vxe-column field="autoFill" title="自动填充">
						<template #default="{ row }">
							<vxe-select v-model="row.autoFill">
								<vxe-option v-for="item in fillList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
							</vxe-select>
						</template>
					</vxe-column>
					<vxe-column field="primaryPk" title="主键">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.primaryPk" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="表单配置" name="form">
				<vxe-table
					ref="formTable"
					border
					row-key
					size="mini" 
					:data="fieldList"
					:checkbox-config="{ checkStrictly: true }"
					:edit-config="{ trigger: 'click', mode: 'cell' }"
				>
					<vxe-column field="attrName" title="属性名"  width="80px"></vxe-column>
					<vxe-column field="fieldComment" title="说明" width="100px"></vxe-column>
					<vxe-column field="formItem" title="编辑" width="60px">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.formItem" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="formItemUp" title="查看"  width="60px">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.formItemUp" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="formRequired" title="必填"  width="60px">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.formRequired" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="formRepeated" title="查重"  width="60px">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.formRepeated" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="formValidator" title="表单效验" :edit-render="{ name: 'input' }"></vxe-column>
					<vxe-column field="formType" title="表单类型">
						<template #default="{ row }">
							<vxe-select v-model="row.formType">
								<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
							</vxe-select>
						</template>
					</vxe-column>
					<vxe-column field="formDict" title="表单字典类型">
						<template #default="{ row }">
							<zh-select
								placeholder="请选择字典"
								:options="dictDataField.fieldData"
								:fieldNames="{
									label: 'fieldName',
									value: 'dictField'
								}"
								v-model="row.formDict"
							></zh-select>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="列表配置" name="grid">
				<vxe-table
					ref="gridTable"
					border
					row-key
					size="mini" 
					:data="fieldList"
					:checkbox-config="{ checkStrictly: true }"
					:edit-config="{ trigger: 'click', mode: 'cell' }"
				>
					<vxe-column field="attrName" title="属性名"></vxe-column>
					<vxe-column field="fieldComment" title="说明"></vxe-column>
					<vxe-column field="gridItem" title="列表显示">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.gridItem" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="gridSort" title="列表排序">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.gridSort" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="查询条件配置" name="query">
				<vxe-table
					ref="queryTable"
					border
					row-key
					:data="fieldList"
					size="mini" 
					:checkbox-config="{ checkStrictly: true }"
					:edit-config="{ trigger: 'click', mode: 'cell' }"
				>
					<vxe-column field="attrName" title="属性名"></vxe-column>
					<vxe-column field="fieldComment" title="说明"></vxe-column>
					<vxe-column field="queryItem" title="查询显示">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.queryItem" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="queryType" title="查询方式">
						<template #default="{ row }">
							<vxe-select v-model="row.queryType">
								<vxe-option v-for="item in queryList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
							</vxe-select>
						</template>
					</vxe-column>
					<vxe-column field="queryFormType" title="查询表单类型">
						<template #default="{ row }">
							<vxe-select v-model="row.queryFormType">
								<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
							</vxe-select>
						</template>
					</vxe-column>
					
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="导入导出" name="expImp">
				<vxe-table
					ref="expImpTable"
					border
					row-key
					:data="fieldList"
					size="mini" 
					:checkbox-config="{ checkStrictly: true }"
					:edit-config="{ trigger: 'click', mode: 'cell' }"
				>
					<vxe-column field="attrName" title="属性名"></vxe-column>
					<vxe-column field="fieldComment" title="说明"></vxe-column>
					<vxe-column field="impItem" title="导入">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.impItem" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
					<vxe-column field="expItem" title="导出">
						<template #default="{ row }">
							<vxe-checkbox v-model="row.expItem" checked-value="1" unchecked-value="0"></vxe-checkbox>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue'
import { ElMessage, TabsPaneContext } from 'element-plus/es'
import Sortable from 'sortablejs'
import type { VxeTablePropTypes, VxeTableInstance } from 'vxe-table'

const activeName = ref()
const fieldTable = ref<VxeTableInstance>()
const formTable = ref<VxeTableInstance>()
const gridTable = ref<VxeTableInstance>()
const queryTable = ref<VxeTableInstance>()
const expImpTable= ref<VxeTableInstance>()
const handleClick = (tab: TabsPaneContext) => {
	if (tab.paneName !== 'field') {
		formTable.value?.loadData(fieldList.value)
		gridTable.value?.loadData(fieldList.value)
		queryTable.value?.loadData(fieldList.value)
	}
}

const visible = ref(false)
const dataFormRef = ref()

const sortable = ref() as any

const typeList = ref([]) as any
const tableId = ref()
const fieldList = ref([])
const fillList = reactive([
	{ label: 'DEFAULT', value: 'DEFAULT' },
	{ label: 'INSERT', value: 'INSERT' },
	{ label: 'UPDATE', value: 'UPDATE' },
	{ label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' }
])

const queryList = reactive([
	{ label: '=', value: '=' },
	{ label: '!=', value: '!=' },
	{ label: '>', value: '>' },
	{ label: '>=', value: '>=' },
	{ label: '<', value: '<' },
	{ label: '<=', value: '<=' },
	{ label: 'like', value: 'like' },
	{ label: 'not like', value: 'not like' },
	{ label: 'in', value: 'in' },
	{ label: 'not in', value: 'not in' },
	{ label: 'between', value: 'between' },
	{ label: 'left like', value: 'left like' },
	{ label: 'right like', value: 'right like' },
	{ label: 'is null', value: 'is null' },
	{ label: 'is not null', value: 'is not null' },
])

const formTypeList = reactive([
	{ label: '单行文本', value: 'text' },
	{ label: '文本域', value: 'textarea' },
	{ label: '数字输入框', value: 'number' },
	{ label: '密码输入框', value: 'password' },
	{ label: '富文本编辑器', value: 'editor' },
	{ label: '下拉框(单选)', value: 'select' },
	{ label: '下拉框(多选)', value: 'selectM' },
	{ label: '下拉框(树)', value: 'selectT' },
	{ label: '下拉框(懒加载)', value: 'selectL' },
	{ label: '级联选择', value: 'cascade' },
	{ label: '开关', value: 'switch' },
	{ label: '单选按钮', value: 'radio' },
	{ label: '复选框', value: 'checkbox' },
	{ label: '日期', value: 'date' },
	{ label: '日期时间', value: 'datetime' },
	{ label: '时间', value: 'time' },
])
let dictDataField=ref({});
const init = (id: number) => {
	visible.value = true
	tableId.value = id

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}
	const params = {};
	$api.common.send.post('dict0024', params).then((res) => {
		dictDataField.value = res.result;
	});
	activeName.value = 'field'
	rowDrop()
	getTable(id)
	getFieldTypeList()
}

const rowDrop = () => {
	nextTick(() => {
		const $grid = fieldTable.value;
		const el: any = $grid.$el.querySelector('.body--wrapper>.vxe-table--body tbody')
		sortable.value = Sortable.create(el, {
			handle: '.drag-btn',
			onEnd: (e: any) => {
				const { newIndex, oldIndex } = e
				const currRow = fieldList.value.splice(oldIndex, 1)[0]
				fieldList.value.splice(newIndex, 0, currRow)
			}
		})
	})
}

const getTable = (id: number) => {
	let params={tableId:id}
  	$api.common.send
      .post('genTableField0007', params)
      .then((res) => {
		fieldList.value = res.result
      })
}

const getFieldTypeList = async () => {
	typeList.value = []
	$api.common.send
      .post('genFieldType0007', {})
      .then((res) => {
		let data = res.result
		// 设置属性类型值
		data.forEach((item: any) => typeList.value.push({ label: item, value: item }))
		// 增加Object类型
		typeList.value.push({ label: 'Object', value: 'Object' })
      })
	
}

// 表单提交
const submitHandle = () => {
	$api.common.send
      .post('genTableField0008', {list:fieldList.value})
      .then((res) => {
		ElMessage.success({
			message: '操作成功',
			duration: 500,
			onClose: () => {
				visible.value = false
			}
		})
      })
	
}

defineExpose({
	init
})
</script>

<style lang="scss">
.sortable-row-gen .drag-btn {
	cursor: move;
	font-size: 12px;
}

.sortable-row-gen .vxe-body--row.sortable-ghost,
.sortable-row-gen .vxe-body--row.sortable-chosen {
	background-color: #dfecfb;
}
</style>
